<template>
  <view :data-theme="globPrimary">
    <u-navbar :border-bottom="false" :custom-back="onBack">
      <view slot="right" class="share-btn">
        <!-- #ifdef MP -->
        <button open-type="share" class="u-reset-button u-fix-ios-appearance">
          <u-icon name="zhuanfa" color="#909399" :size="33"></u-icon>
        </button>
        <!-- #endif -->
      </view>
    </u-navbar>
    <view class="detail-wrap">
      <edu-mescroll-body bottom="98rpx" @init="mescrollInit" @down="refresh" @up="getCommentList">
        <view class="detail-content" v-if="!$u.test.empty(topicDetail)">
          <view class="u-p-l-30 u-p-r-30 u-p-t-20 u-p-b-20 u-border-bottom">
            <view class="title">{{ topicDetail.title }}</view>
            <view class="article u-m-t-25">
              <text>{{ topicDetail.publish_time | timeFrom }}</text>
              <u-icon
                name="eye"
                :label="topicDetail.read_count"
                size="26rpx"
                color="#909399"
                label-size="26rpx"
                label-color="#909399"
              ></u-icon>
            </view>
          </view>
          <view class="content u-p-l-30 u-p-r-30 u-m-t-25">
            <!-- #ifndef APP-PLUS -->
            <u-parse :html="topicDetail.content"></u-parse>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
            <u-parse :html="topicDetail.content_text"></u-parse>
            <!-- #endif -->
          </view>
        </view>
        <u-gap height="10" bg-color="#F7F7F7" margin-top="35" margin-bottom="35"></u-gap>
        <view class="detail-recommend">
          <view class="name">推荐资讯</view>
          <swiper
            class="recommend-swiper"
            display-multiple-items="2"
            :disable-touch="topicRecommend.length <= 2"
            next-margin="32rpx"
          >
            <swiper-item
              v-for="(item, index) in topicRecommend"
              :key="index"
              @click="tolink(item.id)"
            >
              <view class="recommend-item">
                <view class="u-border u-p-b-20">
                  <edu-image width="100%" height="186rpx" :src="item.cover_url"></edu-image>
                  <view class="u-p-l-20 u-p-r-20">
                    <view class="title u-line-1">{{ item.title }}</view>
                    <view class="desc">
                      <view
                        ><u-icon
                          name="eye"
                          :label="item.read_count"
                          size="26rpx"
                          color="#909399"
                          label-size="26rpx"
                          label-color="#909399"
                        ></u-icon
                      ></view>
                      <u-line
                        color="#E4E7ED"
                        direction="col"
                        length="16rpx"
                        margin="0 20rpx"
                      ></u-line>
                      <view>{{ item.publish_time | timeFrom }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
        </view>
        <view class="comment-wrapper">
          <view class="title">评论({{ total }})</view>
          <view>
            <view class="item" v-for="(item, index) in commentList" :key="item.id">
              <view class="heart-photo"
                ><u-avatar :src="item.avatar_url" size="64" @click="onUser(item.user_id)"></u-avatar
              ></view>
              <view class="right u-border-bottom">
                <view class="name u-line-1">{{ item.nick_name }}</view>
                <view class="content">{{ item.content }}</view>
                <view class="bottom">
                  <view class="date">{{ item.create_time | timeFrom('yyyy-mm-dd') }}</view>
                  <view
                    v-if="glob_user_id == item.user_id"
                    class="del"
                    @click="handleDeleteComment(item.id)"
                    >删除</view
                  >
                  <view class="reply" @tap="toAllReply(item.id)">
                    <!-- #ifndef APP-PLUS -->
                    <u-icon
                      name="pinglun"
                      custom-prefix="edu-icon"
                      size="40"
                      color="#909399"
                    ></u-icon>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS -->
                    <u-icon name="chat" size="40" color="#909399"></u-icon>
                    <!-- #endif -->
                    <view class="num">{{ item.reply_count }}</view>
                  </view>
                  <view class="like" :class="{ highlight: item.like == 1 }" @tap="getLike(index)">
                    <u-icon
                      :name="item.like == 1 ? 'thumb-up-fill' : 'thumb-up'"
                      :size="40"
                      :color="item.like == 1 ? '#FF8A52' : '#909399'"
                    ></u-icon>
                    <view class="num">{{ item.like_count }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </edu-mescroll-body>
    </view>
    <view class="release-wrap" :style="{ 'padding-bottom': keyboardheight + 10 + 'px' }">
      <view class="input-wrap">
        <textarea
          class="textarea"
          :value="replyContent"
          placeholder-class="placeholder edu-icon edu-icon-home_edit_icon"
          placeholder="说点什么…"
          :show-confirm-bar="false"
          :adjust-position="false"
          :maxlength="200"
          :auto-height="true"
          @focus="questionFocus"
          @blur="questionBlur"
          @input="questionInput"
        />
      </view>
      <edu-button
        type="primary"
        size="medium"
        shape="circle"
        :disabled="replyBtnDisabled"
        @click="reply"
        >发布</edu-button
      >
    </view>

    <edu-user-coupon></edu-user-coupon>

    <u-modal
      show-cancel-button
      v-model="deleteVisible"
      :show-title="false"
      cancel-text="取消"
      confirm-text="删除"
      :content="deleteContent"
      :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
      cancel-color="#606266"
      :confirm-color="globPrimaryColor"
      @confirm="handleDeleteConfirm"
    >
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import setting from '@/settings/projectSetting.js'
// #ifdef H5
import { wxShare } from '@/utils/share.js'
// #endif
export default {
  data() {
    return {
      setting,
      topicId: '',
      topicDetail: {},
      topicRecommend: [],
      commentList: [],
      replyContent: '',
      total: 0,
      deleteVisible: false,
      deleteContent: '',
      deleteCurrentId: 0,
      keyboardheight: 0,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      userInfo: 'user/getUserInfo',
    }),
    // 当前用户是自己id
    glob_user_id() {
      if (this.$u.test.empty(this.userInfo)) return 0
      return this.userInfo.id
    },
    replyBtnDisabled() {
      return this.$u.trim(this.replyContent).length == 0
    },
  },
  onLoad(option) {
    this.topicId = option.id
    this.getData()
  },
  onShareAppMessage() {
    return {
      title: this.topicDetail.title,
      path: '/pageFound/topic/details?id=' + this.topicId,
      imageUrl: this.topicDetail.cover_url,
      content: this.topicDetail.content_text,
      desc: this.topicDetail.abstract,
    }
  },
  onBackPress({ from }) {
    if (from === 'navigateBack') {
      return false
    }
    this.onBack()
    return true
  },
  methods: {
    tolink(id) {
      this.$edu.route('/pageFound/topic/details', {
        id: id,
      })
    },
    // 资讯详情数据
    getData() {
      this.$edu.api.getTopicDetails(this.topicId).then((res) => {
        const { data } = res
        this.topicDetail = data.detail
        this.topicRecommend = data.splendid

        // #ifdef H5
        let link = this.setting.appBaseUrl + '/pageFound/user/index?id=' + this.topicId
        if (this.$edu.test.isWechat()) {
          wxShare(
            {
              title: this.topicDetail.title || '',
              desc: this.topicDetail.abstract || '',
              link: link,
              imgUrl: this.topicDetail.cover_url,
            },
            (res) => {
              console.log(res)
            }
          )
        }
        // #endif
      })
    },
    // 资讯评论列表
    getCommentList(page) {
      let params = {
        page: page.num,
        count: page.size,
      }
      this.$edu.api.getTopicComment(this.topicId, params).then((res) => {
        const { data } = res
        let total = data.total
        let list = data.data
        this.total = total

        if (page.num == 1) this.commentList = []
        this.commentList = this.commentList.concat(list)
        this.mescroll.endBySize(list.length, total)
      })
    },
    // 上拉刷新
    refresh() {
      this.getData()
      this.mescroll.resetUpScroll()
    },
    // 跳转到全部回复
    toAllReply(id) {
      this.$edu.judgeLogin(() => {
        this.$u.route('pageFound/topic/comment/reply', {
          id: id,
        })
      })
    },
    // 点赞
    getLike(index) {
      if (this.commentList[index].like == 1) {
        this.commentList[index].like = 0
        this.commentList[index].like_count--
      } else {
        this.commentList[index].like = 1
        this.commentList[index].like_count++
      }
      this.$edu.api.putTopicCommentLike(this.commentList[index].id, {
        status: this.commentList[index].like,
      })
    },
    // 点评
    reply() {
      let params = {
        content: this.$u.trim(this.replyContent),
      }
      this.$edu.api.createTopicComment(this.topicId, params).then((res) => {
        this.replyContent = ''
        this.$u.toast(res.msg)
        this.mescroll.resetUpScroll(false)
        this.mescroll.scrollTo(0, 0)
      })
    },
    onUser(id) {
      this.$edu.judgeLogin(() => {
        this.$edu.route('/pageFound/user/index', {
          id: id,
        })
      })
    },
    // 删除评论
    handleDeleteComment(id) {
      this.deleteContent = '确认删除该条评论?'
      this.deleteCurrentId = id
      this.deleteVisible = true
    },
    // 删除确认
    handleDeleteConfirm() {
      this.$edu.api
        .deleteTopicComment(this.deleteCurrentId)
        .then((res) => {
          this.$u.toast(res.msg)
          setTimeout(() => {
            this.mescroll.resetUpScroll(false)
          }, 250)
        })
        .catch((err) => {
          this.$u.toast(err.msg)
        })
    },
    questionFocus(e) {
      this.keyboardheight = e.detail.height
    },
    questionBlur() {
      this.keyboardheight = 0
    },
    questionInput(e) {
      this.replyContent = e.detail.value
    },
    // 返回上一页
    onBack() {
      let pages = getCurrentPages()
      let page = pages[pages.length - 2]
      if (this.$u.test.empty(page)) {
        this.$u.route({ type: 'switchTab', url: 'pages/index/index' })
      } else {
        this.$u.route({ type: 'back' })
      }
    },
  },
  onShow() {
    this.$nextTick(function () {
      this.mescroll.resetUpScroll(false)
      this.mescroll.scrollTo(0, 0)
    })
  },
}
</script>

<style lang="scss" scoped>
.share-btn {
  margin-right: 30rpx;
}
.detail-wrap {
  min-height: calc(100vh - 44px - 98rpx);
  background-color: #ffffff;
  .detail-content {
    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: $edu-main-color;
      line-height: 56rpx;
    }
    .article {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .content {
      padding: 0 30rpx;
    }
  }
  .detail-recommend {
    padding-left: 30rpx;
    .name {
      font-size: 32rpx;
      font-weight: 500;
      color: $edu-main-color;
    }
    .recommend-swiper {
      margin: 30rpx -11rpx 0;
      height: 310rpx;
      .recommend-item {
        margin: 0 11rpx;
        border-radius: 4rpx;
        overflow: hidden;
        .title {
          font-size: 26rpx;
          font-weight: 500;
          color: $edu-main-color;
          margin-top: 12rpx;
        }
        .desc {
          display: flex;
          align-items: center;
          color: $edu-tips-color;
          font-size: 26rpx;
          font-weight: 400;
          margin-top: 18rpx;
        }
      }
    }
  }
  .comment-wrapper {
    padding-left: 30rpx;
    margin-top: 50rpx;
    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: $edu-main-color;
      margin-bottom: 20rpx;
    }
    .item {
      display: flex;
      padding: 20rpx 0;
      .right {
        flex: 1;
        margin-left: 20rpx;
        padding-right: 30rpx;
        padding-bottom: 30rpx;
        .name {
          font-size: 28rpx;
          font-weight: 400;
          color: $edu-content-color;
          max-width: 500rpx;
          margin-bottom: 20rpx;
        }
        .content {
          margin-bottom: 20rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: $edu-main-color;
          line-height: 46rpx;
        }
        .bottom {
          margin-top: 20rpx;
          display: flex;
          align-items: center;
          .date {
            font-size: 24rpx;
            font-weight: 400;
            color: $edu-tips-color;
          }
          .del {
            font-size: 24rpx;
            font-weight: 400;
            color: $edu-content-color;
            margin-left: 24rpx;
          }
          .reply {
            display: flex;
            align-items: center;
            margin-left: auto;
            margin-right: 30rpx;
            .num {
              margin-left: 4rpx;
              color: $edu-tips-color;
              font-size: 24rpx;
            }
          }
          .like {
            display: flex;
            align-items: center;
            .num {
              margin-left: 4rpx;
              color: $edu-tips-color;
              font-size: 24rpx;
            }
            &.highlight {
              .num {
                color: #ff8a52;
              }
            }
          }
        }
      }
    }
  }
}
.release-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 20rpx 30rpx;
  background: #ffffff;
  box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  .input-wrap {
    flex: 1;
    margin-right: 20rpx;
    background: #f7f7f7;
    border-radius: 35px;
    padding: 0 25rpx;
    .textarea {
      width: 100%;
      padding: 20rpx 0;
      font-size: 26rpx;
      font-weight: 400;
      color: #303133;
    }
    ::v-deep .placeholder {
      font-size: 26rpx;
      font-weight: 400;
      color: #b7bac1;
      display: flex;
      align-items: center;
      &:before {
        margin-right: 16rpx;
        font-size: 24rpx;
      }
    }
  }
  ::v-deep .edu-btn {
    width: 120rpx;
    padding: 0;
  }
}
</style>
